Taxonomy driven Slideshow

We were supposed to address Taxonomy last class, but that never really happened so today we're going to learn how to use it to drive a simple slideshow. This exercise will help you get started in thinking about Drupal as a means of handling multimedia content.

We are going to create a content type for photographs and a related taxonomy to sort it and then see how Views works for handling media. The first step is to create a taxonomy...

Setting up our Taxonomy

1. Navigate to Structure >> Taxonomy. By default there will just be a vocabulary called tags... this is just there for reference and we're not going to use it so let's delete it.
2. Click on 'edit vocabulary' and you'll the name and description of the tags vocabulary... click on delete, confirm the deletion and you'll be bounced back to the Taxonomy page which is now empty.
3. Click on '+ Add Vocabulary', let's call our Vocabulary 'images' and add a description of some sort in for would be users. (I used 'photographs' for my description – this would aid users in the future, since we are our users this isn't particularly important for us).
4. Click 'Save' and then 'list terms' – there are of course no terms in the vocabulary because we just made it.
5. Click '+ Add term'

The add term page is deceptively complicated. The only thing that really matters is the name. We could add a description for the term (again, for the benefit of users) and control the URL alias of the term for search results. We don't care about any of this though.

1. Enter 'Cats' under name and press 'Save'
2. Enter 'Landscape' under name and press 'Save'
3. Enter 'Cars' under name and press 'Save'

We've now set up a Taxonomy for images with cats, landscape and cars categories – let's set up some content to sort!

Setting up our 'Image' Content Type

1. Navigate to Structure >> Content Types
2. Click on '+ Add content type'
3. Set this new content type name as 'Image'
4. Under 'Publishing Options' untick 'Promoted to front page' (we don't want every image we put on the site to be posted to the front page), under 'Comment settings' set 'Default comment setting for new content' to 'Hidden' (we are turning off comments for photographs with this step)... and then click 'Save and add fields'
5. We now see the 'Manage fields' display, which should be starting to feel a little familiar by now. Since we are creating a content type for images, we can click on 'delete' (on the right) in the row for the Body field as our photographs don't need text accompanying them. Confirm the delete and then...
6. Enter 'Photograph' under 'Label' and select 'Image' under the 'Type of data to store' (Field). Click 'Save'.
7. The next screen would allow us to control file settings and default images, we don't care about either so click on 'Save field settings'

The configuration page for our Photograph field will open up. It is a lot simpler than it looks. Note that we could set things like a file size limit (e.g. max image file size of 2MB), add an alt (description) field for SEO, control the number of images that could be attached to the field, set default images, file directories, etc. – we don't care about ANY of this for our simple slideshow. The only thing we'll do is...

1. Set a minimum image size for our slideshow so we don't have any tiny images being added to our site – enter '640' and '480' in the 'Minimum image resolution' fields
2. Click on 'Save settings' at the bottom.
3. Back on the 'Manage Fields' page we will add a field to connect this content type to our new taxonomy vocabulary. Under 'Add a new field' enter 'Taxonomy' under 'Label' and 'Term Reference' for 'Type of data to store' (under field), and 'Check boxes/radio buttons' for 'Form element to edit the data' (under widget). Click on 'Save'
4. Since we only have one vocabulary, it is the default on the next page – click on 'Save field settings'

The configuration page for the Term Reference will open up. There isn't much to address here but we could add a default value for the term and also change the number of terms associated with each image (if it were 2 we could have an image tagged with CATS and LANDSCAPE). The only thing we want to change is to tick off 'Required field' at the top, making image tagging mandatory – click on 'Save settings'.

• We are done! Click on 'Save' back on the 'Manage Fields' page.

Adding our photographs

• Download the above photographs... now navigate to add content and add each photograph to the 'Images' content type. Use the title field to describe the contents of each image.

Setting up our slideshow

Now that we've got our images, the next step is to build our slideshow.

1. Navigate to Structure >> Add Views
2. Select 'Add new view'
3. GIve it the name 'Test Slideshow', set it to 'Show content of type images sorted by Newest First'
4. We'll set it up as a page, and the URL will be http://phoenix.sheridanc.on.ca/~ccitXXX/?q=test-slideshow
5. Click on 'Save & edit'

We don't actually have a slideshow module yet, so find and install the Views Slideshow module from Drupal.org (You'll also need to install the Libraries module if you haven't already).

• Navigate back to Structure >> Views and edit the Test Slideshow view

1. The first thing we want to do is set 'Format' to 'Slideshow'... so click on 'Unformatted list' (under format), make that change, and click on Apply (all displays).
2. Many options will pop up, and we're going to ignore them all for the moment. Just note the red text that says we have not installed the jQuery cycle plugin yet – let's attend to that first. When we use external jQuery/javascript plugins in drupal we need to upload them to sites/all/libraries in order for them to be accessible to our site.
3. Click on 'Apply (all displays)' and we'll come back to this configuration page later. Save the view.

As per the above message – we need to go download jQuery cycle to power our slideshow.

1. Navigate to the above URL and click on 'Download the Cycle Plugin' – right click 'save as' on the first option ("Full plugin with all the transition effects!").
2. Now FTP into your site and put a folder called libraries in sites/all and create a subfolder within it called jquery.cycle. Put jquery.cycle.all.js in sites/all/libraries/jquery.cycle

Now we can go back to editing the view!

1. Navigate back to and edit your 'Test Slideshow' view – under 'Format' change it to show 'Fields' rather than 'Content' (accept the default options). Now we need to add the fields.
2. Add 'Content: Photograph' and click 'Apply all displays'. On the configuration screen, untick 'Create a label' (we don't need our photographs to have 'photograph:' above them, right? Our users are not idiots).

We have other options, not that we could change the image style (which we'll learn about shortly) and we could also add links to our images. For the moment, just click on 'Apply (all displays)'.

• Save your view and you will be bounced to your slideshow page and it is probably a mess – many of our images are big and spilling off the side of the page. This really doesn't look very good – let's clean it up.

1. Navigate back to Structure >> Views and edit your test slideshow.
2. First, let's swap the order of the photograph and the title (under fields... click on the little down arrow beside 'add' and click on 'rearrange'. Swap the order and click on 'Apply (all displays)'.

Now, let's fix the big images issue. Save your view and...

1. Navigate to Configuration >> Image Styles (note the default styles, we'll discuss them later)
2. Click on '+ Add style', name it 'slideshow' and click on 'create new style'

Now we can make rules which are applied to images added to the site.

1. Select 'Select a new effect' and set it to 'Scale and crop' – click 'Add'. We are going to make a rule that automatically resizes every image to a specific resolution.
2. Set width to 600 pixels and height to 400 pixels.
3. Click on 'Update Style' and we are complete.

Navigate back to your view and edit it. Now we can apply our image style to the photograph field.

1. Click on 'Content:Photograph' under fields.
2. Change the Image style from 'None (original image)' to 'slideshow' and 'Apply (all displays)'.
3. Save your view and navigate back to the page it is on.

Now your view should look like something like this... where every image is exactly the same size. Note that the original images are still stored on the site (as pieces of content) but the site is using a image library (GD is what ships with Drupal, there are others) to automatically resize (and cache) different sized versions of the images to use on the site. Any thoughts on the slideshow? I think it is scrolling too fast – let's fix that.

• Go back and edit the slideshow and click on 'settings' beside slideshow (under Format)

Scroll down to 'Cycle Options' and tick off 'View Transition Advanced Options' – this is where we can tune the Slideshow. Note that we can use effects other than 'Fade' but for the moment we are just going to slow our slideshow down.

1. Change the timer delay to 8000 (that is milliseconds, we are changing it from 5-8).
2. Also we can change the speed of the actual transition... it is presently set to 700 milliseconds (.7 seconds) let's slow it down slightly to 850.
3. Click on 'Apply' (all displays)
4. Save the view and go view your slideshow to see your changes.

Now it is a little slower. Now, say we want to only show images of type 'cat' in this slideshow. That is easy to set up given the work we did setting up the taxonomy (and tagging the images).

1. Navigate back to the edit page for the view – click on 'add' under filter criteria (we are going to add a rule beyond 'the content must be published + the content must be type image').
2. Select 'Content: has taxonomy term' and click on 'Apply (all displays)'
3. Since we only have the images vocabulary that option is set by default... set the 'selection type' to dropdown and click on 'Apply and continue'

• Now set it to show 'is one of' 'cats' (like the above image) and click on 'Apply (all displays)'. Note that there are many other ways you could use this filter, get used to these options as you'll probably be using them on the final assignment.
• Save your view and navigate back to the slideshow page.

Hooray! We're done and now we understand how taxonomy can be used with views AND how to work with images in Drupal.

Additional exercises:

• Work back to where we changed the image style for 'Content: photograph' – try changing it to the other options and see what happens to your slideshow. Understand that you can set up as many custom image styles as you need on a site for any purpose (thumbnails, content, slideshows, etc.)
• Experiment with the various image style options – on Thursday we'll be playing with the ImageCache Actions module, feel free to work ahead and start playing with it now.
• Try to use CSS to move the image title into the bottom of the image and turn it into a caption that sits on top of the photograph (you'll probably need to use 'background-color' to make it legible).
• Go back to edit the slideshow settings (where we change the speed) and experiment with the various widgets (controls) that you can add.